<template>
  <div class="main">
    <div class="left bg-m">
      <div class="title">
        <div class="flex alcenter plr10">
          <div class="btn pointer">
            USDT
          </div>
        </div>
      </div>
      <div class="table plr10">
        <div class="t-head">
          <div class="tr" style="width: 100px">Currency</div>
          <div class="tr txt-right" style="width: 100px">latest price</div>
          <div class="tr txt-right" style="width: 100px">Increase</div>
        </div>
        <div class="t-body">
          <div class="tr" v-for="(item, i) in data1" :key="item.name" @click="clickTable1Handler(i)" :class="currentT1 === i&&'active'">
            <div class="td">{{item.name}}</div>
            <div class="td txt-right">{{item.value}}</div>
            <div class="td txt-right rate" :class="item.rate>=0?'up':'down'">{{item.rate}}%</div>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <comm-chart />
    </div>
    <div class="right">
      <div class="r-head bg-m">
        handicap
      </div>
      <div class="r-table">
        <div class="r-table-head">
          <div class="td">Direction</div>
          <div class="td center">price(USDT)</div>
          <div class="td right">number(BTC)</div>
        </div>
        <div class="r-table-body">
          <div class="tr" v-for="(item, i) in 10" :key="item.name">
            <div class="td red">sell{{10 - i}}</div>
            <div class="td center">{{3105.000010+i}}</div>
            <div class="td right">{{0.0003*i}}</div>
          </div>
          <div class="current-amount green">
            {{currentAmount}}
          </div>
          <div class="tr" v-for="(item, i) in 10" :key="item.name">
            <div class="td green">buy{{i+1}}</div>
            <div class="td center">{{3100.000010+i}}</div>
            <div class="td right">{{0.0003*i}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import commChart from "@/components/commChart.vue";
export default {
  components: {commChart},
  data() {
    return {
      data1: [
        {
          name: 'XAU',
          value: 3100,
          rate: 0.45
        },
        {
          name: 'BTC',
          value: 83929.521,
          rate: -2.11
        },
        {
          name: 'ETH',
          value: 1881.51,
          rate: 1.79
        },
        {
          name: 'XAU',
          value: 3100,
          rate: 0.45
        },
        {
          name: 'BTC',
          value: 83929.521,
          rate: -2.11
        },
        {
          name: 'ETH',
          value: 1881.51,
          rate: 1.79
        }
      ],
      data2: [
        {
          value: 3105.000010,
          number: 0.0003
        },
        {
          value: 3102.000010,
          number: 0.0003
        },
        {
          value: 3101.000010,
          number: 0.0003
        }
      ],
      currentAmount: 99992.290,
      currentT1: 0
    };
  },
  mounted() {
  },
  methods: {
    clickTable1Handler(i) {
      this.currentT1 = i
    }
  },
};
</script>

<style lang="scss" scoped>

.bg-m {
  background-color: #0B0E11 !important;
}
.red {
  color: #E95463;
}

.green {
  color: #00AB86;
}

.rate.up {
  color: #00AB86 !important;
}

.rate.up::before {
  content: "+";
  color: #00AB86;
}

.rate.down {
  color: #E95463 !important;
}
.main {
  display: flex;
  margin-top: 5px;
  .left {
    width: 20%;
    padding-top: 15px;
    .title {
      .btn {
        padding: 4px 10px;
        background: #FCD535;
        color: #000;
        border-radius: 4px;
        font-weight: 500;
      }
    }
    .table {
      margin-top: 12px;
      .t-body {
        margin-top: 8px;
        .tr.active {
          background: rgba(255, 255, 255, .1);
        }
        .tr {
          padding: 2px 8px;
          cursor: pointer;
          display: flex;
          margin: 3px 0;
          .td.txt-right {
            text-align: right !important;
          }
          .td {
            width: 100px;
            text-align: left;
            color: #fff;
            font-size: 13px;
            font-weight: 500;
          }
        }
      }
      .t-head {
        display: flex;
        .tr.txt-right {
          text-align: right !important;
        }
        .tr {
          margin: 1px;
          font-weight: 600;
          text-align: left;
        }
      }
    }
  }
  .body {
    width: 50%;
    //background: green;
  }
  .right {
    width: 30%;
    .r-head {
      font-weight: 600;
      font-size: 16px;
      border-bottom: 1px solid #273344;
      padding: 8px 10px;
      color: #fff;
    }
    .r-table {
      padding: 0 6px;
      &-body {
        .tr{
          display: flex;
        }
      }
      &-head {
        display: flex;
        margin: 10px 0;
        //padding: 0 4px;
        .td {
          width: 33%;
          font-weight: 600;
        }
        .td.center {
          text-align: center;
        }
        .td.right {
          text-align: right;
        }
      }
      &-body {
        .current-amount {
          border-bottom: 1px solid #273344;
          border-top: 1px solid #273344;
          font-weight: 900;
          font-size: 16px;
          padding: 8px 0;
        }
        .tr {
          text-align: left;
          display: flex;
          margin: 4px 0;
          .td {
            width: 33%;
          }
          .td.center {
            text-align: center;
          }
          .td.right {
            text-align: right;
          }
        }
      }
    }
  }
}


</style>
